✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	56ba018
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/655c5d2bb80abe0008f6d528
😎 Deploy Preview	https://deploy-preview-2719--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Thanks for the pull request, @khudym!

When this pull request is ready, tag your edX technical lead.

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (9face09) 92.83% compared to head (56ba018) 92.83%.
Report is 71 commits behind head on master.

@@            Coverage Diff             @@
##           master    #2719      +/-   ##
==========================================
- Coverage   92.83%   92.83%   -0.01%     
==========================================
  Files         235      235              
  Lines        4241     4240       -1     
  Branches     1029     1029              
==========================================
- Hits         3937     3936       -1     
  Misses        300      300              
  Partials        4        4              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@khudym We should also try to simplify icons prop if we decide to switch to IconButton, it just does not make sense to pass whole <Icon /> component when we only need its src. Instead, I should be able to provide just the icons themselves, e.g.

<SearchField
  ...
  icons={{
    clear: Close,
    submit: Search,
  }}
/>

It's also important not to make a breaking change out of this, one option to do this is to use withDeprecatedProps HOC. I've played around with it a bit, and I think something like this will allow consumers to use new props without breaking old behaviour (this is just a POC, the actual implementation might be cleaner)

SearchField.propTypes = {
  ...
  icons: PropTypes.shape({
    submit: PropTypes.elementType.isRequired,
    clear: PropTypes.elementType,
  })
};

SearchField.defaultProps = {
  ...,
  icons: {
    clear: Close,
    submit: Search,
  },
};

export default withDeprecatedProps(SearchField, 'SearchField', {
  icons: {
    deprType: DeprTypes.FORMAT,
    expect: value => typeof value === 'object' && !React.isValidElement(value.submit) && !React.isValidElement(value.clear),
    transform: value => {
      const newValue = { ...value };
      if (React.isValidElement(value.submit)) {
        newValue.submit = value.submit.props.src;
      }
      if (React.isValidElement(value.clear)) {
        newValue.clear = value.clear.props.src;
      }
      return newValue;
    },
    message: 'It should be an object with "clear" and "submit" keys that contains Icon instances as values.',
  },
});

After this you can pass icon components in both ways

// old variant, consumers will get a warning about deprecation of this usage
<SearchField
  icons={{
    clear: <Icon src={Close} />,
    submit: <Icon src={Search} />,
  }}
/>

// new variant, intended behaviour
<SearchField
  icons={{
    clear: Minus,
    submit: Add,
  }}
/>

Can you try to do this as well? (think we'll also need to implement this for SearchField.Advanced component)

@adamstankiewicz Are we concerned about breaking change here or not. I like @viktorrusakov 's solution. What stops me from doing that is potential breaking change since we change component's API.

@adamstankiewicz,
discussing with @brian-smith-tcril on the PWG we came to conclusion that proper API and code is more beneficial then avoiding the breaking change.

// old variant, consumers will get a warning about deprecation of this usage
<SearchField
  icons={{
    clear: <Icon src={Close} />,
    submit: <Icon src={Search} />,
  }}
/>

// new variant, intended behaviour
<SearchField
  icons={{
    clear: Minus,
    submit: Add,
  }}
/>

@monteri we'll want to make sure the commit uses the breaking change format https://www.conventionalcommits.org/en/v1.0.0/#commit-message-with-both--and-breaking-change-footer

We plan to release all breaking changes at the same time, a new PR is open #2842

@khudym Even though your pull request wasn’t merged, please take a moment to answer a two question survey so we can improve your experience in the future.